<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/1/12 16:54
 -->
<!--setup-->
<script setup>
import { onMounted, onUnmounted, reactive, getCurrentInstance } from 'vue'
import ChartDemo from '/src/components/base/chart/demo.md'
import CeCardDemo from '/src/components/base/ce-card/demo.md'
import TableDemo from '/src/components/base/table/demo.md'

defineProps({
  description: {
    type: String,
    default: '暂无数据'
  }
})
defineEmits({})
const state = reactive({})
const { proxy } = getCurrentInstance()
onMounted(() => {
  // console.log(proxy.$refs.container)
  // const doms = proxy.$refs.container.querySelectorAll('.vuedoc.van-row')
  // let temp = []
  // Array.from(doms).forEach(e => {
  //   console.log(e.innerHTML)
  //   temp.push(e.innerHTML)
  //   proxy.$refs.container.insertAdjacentHTML('beforebegin', e.innerHTML)
  //   e.remove()
  //
  // })
})

onUnmounted(() => {})
</script>

<!--render-->
<template>
  <van-nav-bar title="公共业务组件" left-arrow />
  <g-scroll-view-simple height="calc(100vh - 0.88rem)">
    <div class="my-12 bg-white px-10">
      <g-title type="warning" dark class="my-12">
        注：业务型组件放在项目 src/components/business 目录，在组件上前缀有g-开头，表示全局性组件，这边只做了在
        src/components/base 和 src/components/business 下自动注册了全局组件, 注册全局逻辑封装在了
        src/libs/plugins/global-components.js
      </g-title>
    </div>
    <div class="px-10" ref="container">
      <chart-demo></chart-demo>
      <ce-card-demo></ce-card-demo>
      <table-demo></table-demo>
    </div>
  </g-scroll-view-simple>
</template>

<!--style-->
<style scoped lang="less">
:deep(.van-row) {
  &.vuedoc {
    .van-col {
      background: #fff;
      width: calc((100% - 0.4rem) / 3);
      flex: 1;
      max-width: calc((100% - 0.4rem) / 3);
      margin-right: 0.16rem;
      margin-bottom: 0.16rem;
      border-radius: 0.08rem;
      border: 1px solid #ebeef5;
      &:nth-child(3n) {
        margin-right: 0;
      }
      &:hover {
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
